<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Canvas照片水印</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }
    body {
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container {
      width: 900px;
      height: 400px;
      display: flex;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .container #video,
    .container #canvas {
      flex: 1;
      border: 1px solid #333;
    }
    #snap {
      margin: 0 10px;
      width: 80px;
      line-height: 30px;
      height: 30px;
    }
  </style>
</head>

<body>
  <div class="container">
    <video height="400" autoplay id="video" width="400"></video>
    <button id="snap">拍张照片</button>
    <canvas id="canvas" width="400" height="400"></canvas>
  </div>
  <script>
    window.onload = function() {
      const video = document.querySelector('#video'),
        btn = document.querySelector('#snap'),
        canvas = document.querySelector('#canvas');
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia
      window.URL = window.URL || window.webkitURL || window.msURL;
      // 将摄像头的内容放在video里
      if (navigator.getUserMedia) {
        navigator.getUserMedia({
            video: true
          },
          function(stream) {
            //一切皆是流 视频流 音频流
            // server 可以在浏览器打开
            // 从摄像头到捕捉视频流 由浏览器播放出来
            var url = window.URL.createObjectURL(stream);
            video.src = url;
            video.play();
          },
          function(err) {
          })
      }
      // 点击按钮之后拍照
      // canvas 可以放图片 stram 流里取出一张
      btn.addEventListener('click',function(){
              let context=canvas.getContext('2d');
              context.drawImage(video,0,0,400,400);
              context.font="24px microsoft yahei";
              context.fillStyle="rgba(255,255,255,.9)";
              context.fillText('肠肠萌萌萌萌萌',160,160);
          })
    }
  </script>
</body>

</html>